<template>
  <div class="home">
    <t-layout class="layout">
      <t-aside>
        <t-menu theme="dark" defaultValue="dashboard">
          <img slot="logo" height="28" src="https://tdesign.gtimg.com/site/baseLogo-dark.png" alt="logo" />
          <t-submenu value="3d-effect" title="三维特效">
            <template #icon>
              <t-icon name="code" />
            </template>
            <t-menu-item value="shader">
              <template #icon>
                <icon name="server" />
              </template>
              着色器
            </t-menu-item>
            <t-menu-item value="particle">
              <template #icon>
                <icon name="root-list" />
              </template>
              粒子
            </t-menu-item>
          </t-submenu>
  
          <t-menu-item value="application-scenarios">
            <template #icon>
              <t-icon name="app" />
            </template>
            应用场景
            <i class="menu-badge">2</i>
          </t-menu-item>
  
          <t-menu-item value="animation-effects">
            <template #icon>
              <t-icon name="play-circle" />
            </template>
            动画效果
            <i class="menu-badge">2</i>
          </t-menu-item>
  
          <t-menu-item value="physics-applications">
            <template #icon>
              <t-icon name="control-platform" />
            </template>
            物理应用
            <i class="menu-badge">2</i>
          </t-menu-item>
  
          <t-menu-item value="extended-features">
            <template #icon>
              <t-icon name="extension" />
            </template>
            扩展功能
            <i class="menu-badge">8</i>
          </t-menu-item>
  
          <t-menu-item value="post-processing">
            <template #icon>
              <t-icon name="image" />
            </template>
            后期处理
            <i class="menu-badge">7</i>
          </t-menu-item>
  
          <t-menu-item value="common-examples">
            <template #icon>
              <t-icon name="file" />
            </template>
            常见案例
          </t-menu-item>
  
          <t-menu-item value="related-tools">
            <template #icon>
              <t-icon name="tools" />
            </template>
            相关工具
            <i class="menu-badge">1</i>
          </t-menu-item>
        </t-menu>
      </t-aside>
      <t-layout>
        <t-header>
          <t-head-menu defaultValue="2-1" expandType="popup">
            <t-space>
              <icon name="cabbage" style="color: green" />
              <span>总数: 1000</span>
            </t-space>
            <t-menu-item value="1">github</t-menu-item>
            <t-menu-item value="2">gitee</t-menu-item>
            <template #operations>
              <div :class="mode === 'dark' ? 't-demo-menu--dark' : ''">
                <t-button variant="text" shape="square" @click="toggleTheme">
                  <icon :name="mode === 'dark' ? 'mode-light' : 'mode-dark'" slot="icon" />
                </t-button>
                <t-button variant="text" shape="square">
                  <icon name="search" slot="icon" />
                </t-button>
                <t-button variant="text" shape="square">
                  <icon name="mail" slot="icon" />
                </t-button>
                <t-button variant="text" shape="square">
                  <icon name="user" slot="icon" />
                </t-button>
  
              </div>
            </template>
          </t-head-menu>
        </t-header>
        <t-content class="content">
          <TypeTitle></TypeTitle>
          <div class="card-list">
            <t-card title="VR看房" class="card-item" @click="$router.push('/panorama')">VR看房</t-card>
            <t-card title="Shader编辑器" class="card-item" @click="$router.push('/shader-editor')">Shader编辑器</t-card>
          </div>
        </t-content>
      </t-layout>
    </t-layout>
  </div>
</template>
<script>
import { Icon } from 'tdesign-vue-next';
export default {
  name: 'Home',
  components: {
    Icon,
    TypeTitle
  },
}
</script>
<script setup>
import { ref } from 'vue';
import TypeTitle from '@/components/TypeTitle.vue';
const mode = ref('light');
const toggleTheme = () => {
  mode.value = mode.value === 'dark' ? 'light' : 'dark';
  if (mode.value === 'dark') {
    document.documentElement.setAttribute('theme-mode', 'dark');
  } else {
    document.documentElement.removeAttribute('theme-mode');
  }
};
</script>
<style scoped>
.home {
  height: 100vh;
}

.layout {
  height: 100%;
}

.t-menu__operations .t-button {
  margin-left: 8px;
}

.t-demo-menu--dark .t-button {
  color: #fff;
}

.t-demo-menu--dark .t-button:hover {
  background-color: #4b4b4b;
  border-color: transparent;
  --ripple-color: #383838;
}

.top-bar {
  box-sizing: border-box;
  height: 46px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: -1px 3px 10px #0003;
  background-color: #fff;
}

.menu-badge {
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-style: normal;
  border-radius: 9px;
  background-color: #f50;
  color: #fff;
  margin-left: 8px;
}

.content {
  box-sizing: border-box;
  padding: 16px;
  overflow-y: auto;
}

.card-list {
  padding-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card-list .card-item {
  width: 300px;
  cursor: pointer;
}
</style>